<template>
  <div class="task-page">
    <TaskHeader />
    <TaskBanner :type="2" />

    <div class="task-title">
      <h3>最新任务</h3>
      <div class="task-positon-pop" @click="state.positionTypeBool = true">
        {{ state.positionValue || '职位类型' }}<span></span>
      </div>
      <div class="task-screen-pop" @click="state.screenBool = true">筛选<span></span></div>
    </div>

    <VantPullList
      v-model:loading="state.loading"
      :finished="state.finished"
      :data="state.taskList"
      @load="onLoad"
      @refresh="onRefresh"
    >
      <TaskList :taskList="state.taskList" />
    </VantPullList>

    <Footer />

    <van-popup
      v-model:show="state.positionTypeBool"
      position="top"
      duration="0"
      :style="{ width: '100%', height: '100%' }"
    >
      <PositionType @close="state.positionTypeBool = false" />
    </van-popup>
    <!--//End 职位类型弹窗-->

    <van-popup
      v-model:show="state.screenBool"
      position="top"
      duration="0"
      :style="{ width: '100%', height: '100%' }"
    >
      <Screen @close="state.screenBool = false" />
    </van-popup>
    <!-- //End 筛选 -->
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import TaskHeader from './components/TaskHeader/index.vue';
import PositionType from './components/PositionType/index.vue';
import Screen from './components/Screen/index.vue';
import VantPullList from '@/components/VantPullList/index.vue';
import TaskList from '@/components/TaskList/index.vue';
import Footer from '@/components/Footer/index.vue';
import TaskBanner from './components/TaskBanner/index.vue';
import { taskStore } from '@/store/task';
import { taskAllList } from '@/api/task';

const state = reactive({
  loading: false,
  positionTypeBool: false,
  screenBool: false,
  taskList: [],
  positionValue: '',
  serviceMode: '',
  taskCycle: '',
  pageNum: 0,
  pageSize: 10,
  finished: false,
});

const store = taskStore();
const getTaskAllList = async () => {
  state.loading = true;
  if (state.pageNum == 1) state.taskList = [];
  const res: any = await taskAllList({
    position_name: state.positionValue,
    service_mode: state.serviceMode,
    task_cycle: state.taskCycle,
    pageNum: state.pageNum,
    pageSize: state.pageSize,
    city: store.cityValue,
  });
  if (res) {
    state.taskList = state.taskList.concat(res.records);
    state.loading = false;
    if (state.taskList.length >= res.total) {
      state.finished = true;
    } else {
      state.finished = false;
    }
  } else {
    // Toast(res.msg);
    state.loading = false;
  }
};

const onLoad = () => {
  state.pageNum = state.pageNum + 1;
  getTaskAllList();
};
const onRefresh = () => {
  state.pageNum = 1;
  getTaskAllList();
};
</script>

<style lang="scss" scoped>
.task-page {
  background: #f9f9f9;
  padding: 0 0.59rem 3rem;
  min-height: calc(100vh - 3rem);
}

.task-title {
  display: flex;
  align-items: center;
  margin-bottom: 0.67rem;
  margin-top: 1.44rem;
  h3 {
    flex: 1;
    font-size: 0.96rem;
    line-height: 0.96rem;
    font-weight: bold;
    color: #333333;
  }

  .task-positon-pop,
  .task-screen-pop {
    font-size: 0.75rem;
    line-height: 0.75rem;
    font-weight: 300;
    color: #666666;
    margin-left: 0.56rem;
  }
  .task-positon-pop span,
  .task-screen-pop span {
    display: inline-block;
    border-left: 0.18rem solid transparent;
    border-right: 0.18rem solid transparent;
    border-top: 0.36rem solid #333333;
    margin-left: 0.25rem;
  }
}
</style>
